 <template>
   <div class="gallary">
     <span class="iconfont popupClose" @click="handlecloseShow">X</span>
     <div class="contain" @click.stop="()=>{}">
      <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item,index) in imgsArr" :key="index">
          <a :href="item.href" target="_bank" :ref="`img${index}`"><img :src="item.src" /></a>
        </swiper-slide >
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
     </div>
   </div>
 </template>
<script>
import '@/assets/css/swiper.min.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    imgsArr: {
      type: Array,
      default() {
        return [];
      }
    },
    gallaryIndex: {
      type: [Number, String]
    }
  },
  data() {
    return {
      activeIndex: 0,
      swiperOption: {
        initialSlide: this.gallaryIndex,
        // slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer: true,
        spaceBetween: 80,
        observeParents: true,
        centeredSlides: true,
      }
    }
  },
  methods: {
    handlecloseShow() {
      this.$emit('listenClose')
    },
  }
}
</script>
<style lang="scss" scoped>
.gallary{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: #000;
  .contain{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 660px;
    max-width: 66vw;
    // max-height: 80vh;
    transform: translate3d(-50%, -50%, 0);
    overflow: hidden;

    // .swiper-container {
    //   align-items: center !important;
    // }

    /deep/ .swiper-wrapper {
      align-items: center !important;
    }

    .swiper-slide{
      display: flex;
      justify-content: center;
      padding: 60px;
      align-items: center;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.popupClose{
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: #fff;
  cursor: pointer;
  z-index: 10000;
}
</style>
